<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>我要参赛</title>
  <link rel="stylesheet" href="./css/zxg-base.css">
  <link rel="stylesheet" href="./css/woyaocansai.css">
  <link rel="stylesheet" href="./css/message.css">
  <link rel="stylesheet" href="./fonts/iconfont.css">
</head>
<body id="body">
  <form action="" enctype="multipart/form-data" id="uploadForm" method="post">
    <header class="header">
      <div class="header-box">
        <div class="header-left">
          <input type="image" src="./images/timg.jpg" alt="portrait" id="portrait" onclick="return false;">
        </div>
        <div class="header-right">
          <input type="hidden" value="uid" name="uid" id="uid">
          <input type="text" id="name" value="经理" name="name" readonly>
          <input type="text" id="job" value="打酱油" name="job" readonly>
        </div>
      </div>
    </header>
    <main class="main">
      <div class="main-box">
          <div class="main-box-top">
            <span>作品描述</span>
            <textarea name="portrait" id="textarea" cols="30" rows="10" placeholder="请输入您对作品的描述..."
                      oninput="font_siz()"></textarea>
            <i><b id="num">0</b>/40</i>
          </div>
          <div class="main-box-bottom clearfix">
            <span>上传照片</span>
            <div class="add-img">
              <span class="iconfont icon-zhaoxiangji"></span>
              <b>添加照片</b>
                <input type="file" name="file" id="selectfiles" multiple="multiple"/>
            </div>
          </div>
        <!--图片显示位置-->
        <ul class="img-box clearfix" id="ossfile">
          <li class="caution">你的浏览器不支持flash,Silverlight或者HTML5！</li>
        </ul>
      </div>
    </main>
    <!--立即报名-->
    <footer class="footer" id="footer">
      <button id="postfiles">立即上传手艺照片</button>
      <!-- <input type="submit" id="postfiles" value="立即上传手艺照片"> -->
      <div class="footer-text">
        <h3>参赛规则：</h3>
        <p>每人可参加一次手艺大赛，每次可上传6~12张手艺照片。</p>
      </div>
      <div id="txt"></div>
    </footer>
  </form>
</body>
<script src="./js/jquery.js"></script>
<script src="./js/message.js"></script>
<script type="text/javascript" src="lib/crypto1/crypto/crypto.js"></script>
<!--支持的格式类型-->
<script type="text/javascript" src="lib/crypto1/hmac/hmac.js"></script>
<script type="text/javascript" src="lib/crypto1/sha1/sha1.js"></script>
<script type="text/javascript" src="lib/base64.js"></script>
<script src="./lib/crypto1/md5-/md5.js"></script>
<!--文件上传-->
<script type="text/javascript" src="lib/plupload-2.1.2/js/plupload.full.min1.2.1.js"></script>
<script type="text/javascript" src="./js/upload3.js"></script>
<script>
  // 判断文本域字符数
  function font_siz() {
    var txt = $("#textarea").val();
    var num = $("#textarea").val().length;
    if (num <= 40) {
      $("#num").text(num);
    } else {
      $("#textarea").val(txt.substring(0, 40))  // 截取字符串
      alert("最多输入40个字符");
    }
  };
  // 信息输入框宽度计算
  var nameWidth = $("#name").val().length * 13
  var jobWidth = $("#job").val().length * 13
  $("#name").css('width', nameWidth);
  $("#job").css('width', jobWidth);
</script>
</html>